<template>
	<view class="layout" :style="`background: ${navBgColor}`">
		<view class="item" :style="`width: ${width}`" v-for="(item,index) in list" :key="index" @click="jump(item)">
			<view class="img" :style="`width: ${imgW}rpx, height: ${imgH}rpx`">
				<image :src="item.img"></image>
			</view>
			<text :style="`color: ${fontColor}`">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
import router from '../../../utils/router'
	export default{
		props: {
			list: {
				type: Array,
				default: []
			},
			navBgColor: {
				type: String,
				default: 'transparent'
			},
			width: {
				type: String,
				default: '25%'
			},
			imgW: {
				type: String,
				default: '52rpx'
			},
			imgH: {
				type: String,
				default: '52rpx'
			},
			fontColor: {
				type: String,
				default: '#333'
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			jump(data){
				router.push({
					path: data.url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.layout{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.item{
			width: 25%;
			text-align: center;
			margin-bottom: 30rpx;
			.img{
				width: 52rpx;
				height: 52rpx;
				margin: 0 auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			text{
				color: #FFF;
				font-family: Source Han Sans CN;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				margin-top: 10rpx;
			}
		}
	}
	
	
</style>